import React from 'react';
import {
  Image,
  Text,
  View,
  StyleSheet
} from 'react-native';

export default class CardHeader extends React.Component {
  static defaultProps = {
    thumbStyle: {},
    style: {},
  }

  render() {
    const {
      title,
      thumb,
      thumbStyle,
      extra,
      style,
      ...restProps,
    } = this.props;

    const titleDom = title === undefined ? null : React.isValidElement(title) ? (
      <View style={{flex: 1}}>{title}</View>
    ) : (<Text style={styles.headerContent}>{title}</Text>);

    const extraDom = extra === undefined ? null : React.isValidElement(extra) ? (
      <View style={{flex: 1}}>{extra}</View>
    ) : (<Text style={styles.headerTitle}>{extra}</Text>);

    return (
      <View style={[styles.headerWrap, style]} {...restProps}>
        <View style={[styles.headerTitle]}>
          {typeof thumb === 'string' ? (
            <Image
              resizeMode='stretch'
              source={{uri: thumb}}
              style={[styles.headerImage, thumbStyle]}
            />) : (thumb)}
          {titleDom}
        </View>
        {extra ? extraDom : null}
      </View>
    )
  }
}


const styles = StyleSheet.create({

  headerWrap: {
    flexDirection: 'row',
    paddingVertical: 6,
    paddingRight: 15,
    marginLeft: 15,
    alignItems: 'center',
  },
  headerTitle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerImage: {
    marginRight: 5,
  },
  headerContent: {
    color: '#000000',
    fontSize: 17,
    flex: 1,
  },
  headerExtra: {
    flex: 1,
    fontSize: 17,
    color: '#888888',
    textAlign: 'right',
  },

})